<template>
  <div class="flex flex-column height payment">
    <header-top
      ref="header"
      :TxtHeader="TxtHeader"
      @leftClick="back"
    ></header-top>
    <div class="cont_warp">
      <div class="pay_info">
        <!-- <div class="pay_time">
          <img src="./img/tips.png" alt="" />
          <span>
            请在
            <van-count-down
              :time="time"
              @finish="finishFn"
              format="mm 分 ss 秒"
            />内完成支付，超时订单自动取消。</span
          >
        </div> -->
        <div class="pay_title">
          订单信息
        </div>
        <div class="pay_cont">
          <div class="pay_cont_item">
            <label>订单名称</label>
            <span>图文问诊</span>
          </div>
          <div class="pay_cont_item">
            <label>订单编号</label>
            <span>1111334567686</span>
          </div>
          <div class="pay_cont_item">
            <label>创建时间</label>
            <span>2020-09-01 10:52:35</span>
          </div>
          <div class="pay_cont_item">
            <label>订单金额</label>
            <span><i>¥</i><strong>20.00</strong></span>
          </div>
        </div>
      </div>
      <div class="pay_info">
        <div class="pay_title">
          选择支付方式
        </div>
        <div class="pay_cont">
          <div class="pay_cont_sele">
            <van-radio-group v-model="pay">
              <label for="1">
                <div>
                  <img src="./img/wx.png" alt="" />
                  <span>微信支付</span>
                </div>
                <van-radio name="1" checked-color="#07c160"></van-radio>
              </label>
              <label for="2" class="p-b-no border-no">
                <div>
                  <img src="./img/zfb.png" alt="" />
                  <span>支付宝支付</span>
                </div>
                <van-radio name="2" checked-color="#07c160"></van-radio>
              </label>
            </van-radio-group>
          </div>
        </div>
      </div>
    </div>
    <div class="pay_footer flex justify-content-between">
      <div>
        <span>应付金额：</span>
        <i>¥</i>
        <strong>20.00</strong>
      </div>
      <button @click="goPayFn">去支付</button>
    </div>
  </div>
</template>
<script>
import HeaderTop from "@/components/header-top";
import { Dialog } from "vant";
export default {
  name: "Payment",
  components: {
    HeaderTop,
    [Dialog.Component.name]: Dialog.Component
  },
  data() {
    return {
      pay: "",
      time: 10 * 1000,
      TxtHeader: {
        //头部设置
        color: "#fff", //头部中间文字颜色
        title: "收银台",
        leftOpt: {
          //左边按钮设置
          icon: "",
          text: "",
          color: "#fff"
        }
      }
    };
  },
  methods: {
    goPayFn() {
      if (!this.pay) {
        Dialog.alert({
          message: "请选择支付方式",
          confirmButtonText: "我知道了"
        });
        return false;
      }
    },
    // finishFn() {
    //   Dialog.alert({
    //     message: "支付超时订单已取消",
    //     confirmButtonText: "我知道了"
    //   }).then(() => {
    //     // on close
    //   });
    // },
    back() {
      Dialog.confirm({
        message: "确定放弃支付吗？",
        cancelButtonText: "取消支付",
        confirmButtonText: "继续付款"
      }).catch(() => {
        this.$router.go(-1);
      });
    }
  }
};
</script>
<style scoped>
.payment >>> .van-count-down {
  display: inline;
}
.payment >>> .van-count-down {
  color: #fa6400;
}
</style>
<style lang="less" scoped>
.payment {
  background: url("./img/pay_header.png") no-repeat left top;
  background-size: 100%;
  .cont_warp {
    padding: 0.1rem;
    .pay_info {
      border-radius: 0.07rem;
      padding: 0.2rem;
      background: #fff;
      margin-bottom: 0.1rem;
      .pay_time {
        line-height: 0.17rem;
        margin-bottom: 0.21rem;
        img {
          width: 0.125rem;
        }
      }
      .pay_title {
        padding-left: 0.15rem;
        position: relative;
        font-size: 0.18rem;
        height: 0.25rem;
        line-height: 0.25rem;
        margin-bottom: 0.2rem;
      }
      .pay_title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.05rem;
        width: 0.05rem;
        height: 0.15rem;
        background: #08d6c6;
      }
      .pay_cont {
        .pay_cont_item {
          margin-bottom: 0.1rem;
          height: 0.2rem;
          line-height: 0.2rem;
          font-size: 0.14rem;
          label {
            color: #666;
            width: 1.14rem;
            display: inline-block;
          }
          span {
            i {
              font-size: 0.13rem;
              color: #e02020;
            }
            strong {
              font-size: 0.2rem;
              font-weight: normal;
              color: #e02020;
            }
          }
        }
        .pay_cont_sele {
          label {
            display: flex;
            justify-content: space-between;
            padding: 0.15rem 0;
            border-bottom: 1px solid #e9e9e9;
            div {
              display: flex;
              align-items: center;
              font-size: 0.14rem;
              img {
                width: 0.275rem;
                margin-right: 0.15rem;
              }
            }
          }
        }
      }
    }
  }
  .pay_footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.15rem;
    background: #fff;
    box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.07);
    div {
      height: 0.44rem;
      line-height: 0.44rem;
      span {
        color: #666;
      }
      i {
        color: #e02020;
        font-size: 0.14rem;
      }
      strong {
        font-weight: normal;
        font-size: 0.21rem;
        color: #e02020;
      }
    }
    button {
      width: 1.405rem;
      height: 0.44rem;
      border-radius: 0.44rem;
      border: 0;
      font-size: 0.18rem;
      color: #fff;
      background-image: linear-gradient(to left, #02c0cb, #0adda4);
    }
  }
}
</style>
